<template>
  <div class="singerlist">
    <div class="classification">
      <div class="area">
        语种：
        <span :class="area === -1 ? 'selectStyle' : '' " @click="areaChange(-1)">全部</span>|
        <span :class="area === 7 ? 'selectStyle' : '' " @click="areaChange(7)">华语</span>|
        <span :class="area === 96 ? 'selectStyle' : '' " @click="areaChange(96)">欧美</span>|
        <span :class="area === 8 ? 'selectStyle' : '' " @click="areaChange(8)">日本</span>|
        <span :class="area === 16 ? 'selectStyle' : '' " @click="areaChange(16)">韩国</span>|
        <span :class="area === 0 ? 'selectStyle' : '' " @click="areaChange(0)">其他</span>
      </div>
      <div class="type">
        分类：
        <span :class="type === -1 ? 'selectStyle' : '' " @click="typeChange(-1)">全部</span>|
        <span :class="type === 1 ? 'selectStyle' : '' " @click="typeChange(1)">男歌手</span>|
        <span :class="type === 2 ? 'selectStyle' : '' " @click="typeChange(2)">女歌手</span>|
        <span :class="type === 3 ? 'selectStyle' : '' " @click="typeChange(3)">乐队组合</span>
      </div>
      <div class="initial">
        <span>筛选：</span>
        <div class="letter">
          <span :class="initial === -1 ? 'selectStyle' : '' " @click="initialChange(-1)">热门</span>|
          <div v-for="(item, index) in letter" :key="index">
            <span :class="initial === item.toLowerCase() ? 'selectStyle' : '' "  @click="initialChange(item.toLowerCase())">{{ item }}</span>
            <span>|</span>
          </div>
          <span :class="initial === 0 ? 'selectStyle' : '' " @click="initialChange(0)">#</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="li" @click="toSingerRank">
        <img src="../../../assets/images/singerrank.png" height="161px" />
        <div class="name">
          <span>歌手排行榜</span>
        </div>
      </div>
      <div class="li" v-for="(item, index) in artists" :key="index">
        <img :src="item.picUrl" @click="toSingerDetail(item.id)" />
        <div class="name">
          <span>{{ item.name }}</span>
          <i :class="item.accountId === undefined ? '' : 'iconfont icon-Account' " @click="toSingerInfo(item.accountId)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSingerList } from '../../../network/singer.js'
export default {
  data () {
    return {
      type: -1,
      area: -1,
      initial: -1,
      letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      artists: []
    }
  },
  methods: {
    toSingerRank () {
      this.$router.push('/singer_rank')
    },
    toSingerInfo (id) {
      this.$router.push('/user_info/' + id)
    },
    toSingerDetail (id) {
      this.$router.push('/singer_detail/' + id)
    },
    areaChange (area) {
      this.area = area
      this.getSingerList(this.type, this.area, this.initial)
    },
    typeChange (type) {
      this.type = type
      this.getSingerList(this.type, this.area, this.initial)
    },
    initialChange (initial) {
      this.initial = initial
      this.getSingerList(this.type, this.area, this.initial)
    },
    getSingerList (type, area, initial) {
      getSingerList(type, area, initial).then(res => {
        // console.log(res.data)
        this.artists = res.data.artists
        // console.log(this.artists)
      })
    }
  },
  created () {
    this.getSingerList(this.type, this.area, this.initial)
  }
}
</script>

<style lang="less" scoped>
  .selectStyle {
    padding: 3px 5px;
    background-color: #8f9096;
    border-radius: 5px;
    color: #fff;
  }
  .singerlist {
    width: 95%;
    margin: auto;
    .classification {
      width: 100%;
      color: #666666;
      padding-bottom: 10px;
      font-family: SimSun;
      display: flex;
      flex-direction: column;
      // justify-content: flex-start;
      border-bottom: 1px solid #e1e1e2;
      div {
        text-align: left;
        margin: 10px 0;
        span {
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .initial {
        margin-top: -2px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .letter {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          span {
            margin: 0 5px;
          }
        }
      }
    }
    .list {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .li {
        width: 15%;
        margin: 15px 2% 10px 0;
        img {
          width: 100%;
        }
        .name {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          i {
            font-size: 20px;
            color: #0077AA;
          }
          i:hover {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
          }
        }
      }
      .li:nth-child(6n) {
        margin-right: 0;
      }
    }
  }
</style>
